<template>
    <div>
      <el-input v-if="!isSuc" type="textarea" :rows="26" v-model="errorText" readonly>
      </el-input>
      <el-table v-else
        :data="dataList" stripe
          border
          v-loading="loading"
          :height="domHeight">
          <el-table-column type="index" align="center" width="80"></el-table-column>
          <el-table-column v-for="column in columns" :key="column" align="center" :prop="column.prop" :label="column.label"></el-table-column>
        </el-table>
    </div>
</template>

<script>
  import API from '../../../api/index'
  export default {
    name: 'preview',
    data () {
      return {
        domHeight: document.documentElement['clientHeight'] - 280,
        loading: false,
        dataList: [],
        columns: [],
        errorText: '',
        isSuc: true
      }
    },
    methods: {
      loadData (stepName, xml) {

        this.isSuc = true
        this.errorText = ''
        this.dataList = []
        this.columns = []
        this.loading = true
        API.trans.previewData(xml, stepName).then(({data}) => {
          this.loading = false
          if (data.page) {
            this.dataList = data.page
            this.columns = data.columns
          } else {
            this.isSuc = false
            this.errorText = data.message
          }
        }).catch(error => {
          this.loading = false
          this.isSuc = false
          this.errorText = error.response.data
        })
      }
    }
  }
</script>


